<template>
	<view>
		<!-- 侧边栏 -->
		<view class="sidebar" :style="{backgroundImage:(bg === 'bg1'?ImageBg.backgroundImage1:ImageBg.backgroundImage2)}">
			<view class="icon-box" v-for="(item, index) in iconItem" :key="index">
				<view class="icon" :style="{backgroundImage:item}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-sidebar",
		data() {
			return {
				ImageBg: {
					backgroundImage1: 'url(' + require('@/static/style1/zh23.png') + ')',
					backgroundImage2: 'url(' + require('@/static/style2/zh23.png') + ')',

				},
				iconItem: [
					'url(' + require('@/static/style1/p1.png') + ')',
					'url(' + require('@/static/style1/p2.png') + ')',
					'url(' + require('@/static/style1/p3.png') + ')',
					'url(' + require('@/static/style1/p4.png') + ')',
					'url(' + require('@/static/style1/p5.png') + ')',
					'url(' + require('@/static/style1/p6.png') + ')',
					'url(' + require('@/static/style1/p7.png') + ')',
				],
			};
		}
	}
</script>

<style lang="scss" scoped>
	.sidebar {
		width: 91rpx;
		height: 600rpx;
		// border: 1px red solid;
		// background-image: url('@/static/style1/zh23.png');
		background-repeat: no-repeat;
		background-position: center center;

		.icon-box {
			width: 80%;
			padding-top: 47rpx;
			// border: 1px solid red;
			// margin: 0 auto;
			// margin: 50rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				// border: 1px solid blue;
				width: 30rpx;
				height: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>